<template>

			
			<uni-card :is-shadow="true">
				<!-- <uni-forms-item label="" >
					<uni-easyinput v-model="tableName" placeholder="请输入表单名称" />
				</uni-forms-item> -->
				<view v-for="(item,index) in tableList">
					
					<!-- 文本框 -->
					<uni-row class="demo-uni-row" v-if="item.type ==1" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<uni-easyinput v-model="item.content" placeholder="请输入内容" />
						</uni-col>
						
					</uni-row>
					<!-- 单选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==2" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<uni-data-checkbox  v-model="item.content"  :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						
					</uni-row>
					<!-- 复选框-->
					<uni-row class="demo-uni-row" v-if="item.type ==3" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-data-checkbox multiple v-model="item.content" :localdata="item.optionList"></uni-data-checkbox>
						</uni-col>
						
					</uni-row>
					<!-- 下拉列表-->
					<uni-row class="demo-uni-row" v-if="item.type ==4" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-data-select
							       v-model="item.content"
							     :localdata="item.optionList"
							    
							    ></uni-data-select>
						</uni-col>
						
					</uni-row>
					<!-- 图片-->
					<uni-row class="demo-uni-row" v-if="item.type ==5" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<button class="mini-btn" type="primary" size="mini" @click="selectImages()">选择图片</button>
							
							<!-- <uni-file-picker limit="8" v-model="item.content" title="最多选择8张图片"></uni-file-picker> -->
						</uni-col>
						
					</uni-row>
					<uni-row class="demo-uni-row" v-if="item.type ==5" >
						<uni-col :span="4">
							&nbsp;
						</uni-col>
						<uni-col :span="20">
						
							<uni-grid :column="3" :show-border="false" :square="false" >
								<uni-grid-item v-for="(item ,index) in imagesList" :index="index" :key="index">
									
									<view class="grid-item-box" @click="showImage(imageUrl+item)">
									
										<image class="image" :src="imageUrl+item" mode="scaleToFill"  />
										
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-col>
						
					</uni-row>
					<!-- 视频-->
					<uni-row class="demo-uni-row" v-if="item.type ==6" >
						<uni-col :span="4">
							<view style="font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							<button class="mini-btn" type="primary" size="mini" @click="selectVideo()">选择视频</button>
							<!-- <uni-file-picker limit="8" v-model="item.content"  file-mediatype="video" title="最多选择8个视频"></uni-file-picker> -->
						</uni-col>
						
					</uni-row>
					<uni-row class="demo-uni-row" v-if="item.type ==6" >
						<uni-col :span="4">
							&nbsp;
						</uni-col>
						<uni-col :span="20">
						
							<uni-grid :column="1" :show-border="false" :square="false" >
								<uni-grid-item v-for="(item ,index) in vedioList" :index="index" :key="index">
									
									<view class="grid-item-box" @click="showVideo(imageUrl+item)">
									
										<video  :src="imageUrl+item"   ></video>
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-col>
						
					</uni-row>
					      
					           
					<!-- 日期-->
					<uni-row class="demo-uni-row" v-if="item.type ==7" >
						<uni-col :span="4">
							<view style="margin-top: 8px;font-size: 16px;">{{item.name}}</view>
						
						</uni-col>
						<uni-col :span="20">
							
							<uni-datetime-picker type="date" v-model="item.content"  :clear-icon="false"  />
						</uni-col>
					
					</uni-row>
				</view>
			</uni-card>
			
			
			
			
		
		<uni-card :is-shadow="false">
			<uni-forms-item label="" >
				<button type="primary" @click="submit()">保存</button>
			</uni-forms-item>
		</uni-card>
	
		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" style="background-color: #fff;">
			<view class="popup-content">
				<view>
					<video v-if="!isImage" :src="bigVedio"   controls style="width:480px;height:480px;" ></video>
					<image v-if="isImage" style="width:480px;height:480px;"  :src="bigImage" mode="aspectFit"  />
					
				</view>
				<view>
					<button class="mini-btn"  type="default" size="mini" @click="hidePopup">关闭</button>
				</view>
				
				
			</view>
			
			
		</uni-popup>
		
</template>

<script>
	import http from '@/store/http.js'
	import constant from '@/store/constant.js'
import common from '../../store/common';
	
	export default {
			data() {
				return {
					
					imageUrl:constant.baseImageUrl,
				
					tableList:[
						// {
						// 	type:0,
						// 	name:"文本框测试用的递增",
						// 	content:"",
						// 	optionList:[
						// 		{
						// 			text: '男',
						// 			value: 0
						// 		}, {
						// 			text: '女',
						// 			value: 1
						// 		}
						// 	]
						// }
					],
					imagesList:[
					// 	"2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg","2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg"
					// ,"2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg","2024-06-26/85a2bf8e4e0f421685db977c71c40832.jpg"
						],
					vedioList:[
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4",
						// "2024-06-26/87c9c49fd91a87a7ca6ac93532d9dd9a.mp4"
						],
					isImage:true,
					bigImage:"",
					bigVedio:"",
					
					
					
					
				}
			},
			onShow() {
				
				
				
			},
			onLoad(option){
				var self=this;
				var templateId=uni.getStorageSync('templateId');
				
				var templateData=common.getCacheItemData(4,0,templateId);
				if(undefined!=templateData.field){
					var fieldArray=templateData.field;
					var length=fieldArray.length;
					var tableList=[];
					
					for(var i=0;i<length;i++){
						var field=fieldArray[i];
						
						
						var item= {
								id:field.id,
								type:field.type,
								name:field.name,
								// value:null,
								content:"",
								optionList:[]
							}
						switch(field.type){
							//文本和时间
							case 1:
							case 7:
								item.content="";
								break;
							//单选和下拉
							case 2:
							case 4:
								item.content=0;
								break;
							//多选
							case 3:
								item.content=[];
								break;
							//图片
							case 5:
								
								break;
							//视频
							case 6:
								
								break;
						
						}
						if(field.option!=undefined){
							for(var j=0;j<field.option.length;j++){
								var optionItem={
									id:field.option[j].id,
									text: field.option[j].name,
									value: field.option[j].sort
								}
								item.optionList.push(optionItem);
							}
						}	
						tableList.push(item);
					}
					
					
					self.$data.tableList=tableList;
				}else{
					http.get("/api/template/getTemplateInfo?templateId="+templateId,(result)=>{
						
						if(result.status){
							var fieldArray=result.data.field;
							var length=fieldArray.length;
							var tableList=[];
							
							for(var i=0;i<length;i++){
								var field=fieldArray[i];
								
								
								var item= {
										id:field.id,
										type:field.type,
										name:field.name,
										// value:null,
										content:"",
										optionList:[]
									}
								switch(field.type){
									//文本和时间
									case 1:
									case 7:
										item.content="";
										break;
									//单选和下拉
									case 2:
									case 4:
										item.content=0;
										break;
									//多选
									case 3:
										item.content=[];
										break;
									//图片
									case 5:
										
										break;
									//视频
									case 6:
										
										break;
								
								}
								if(field.option!=undefined){
									for(var j=0;j<field.option.length;j++){
										var optionItem={
											id:field.option[j].id,
											text: field.option[j].name,
											value: field.option[j].sort
										}
										item.optionList.push(optionItem);
									}
								}	
								tableList.push(item);
							}
							
							
							self.$data.tableList=tableList;
						}else{
							self.showContentToast(result.msg);
						}
						
					})
				}
				
			
				
				
				
			},
			watch: {
			
			},
			mounted() {
			
			},
	
			methods:{
				hidePopup(){
					this.$refs.popup.close();
				},
				showImage(url){
					this.$data.isImage=true;
					this.$data.bigImage=url;
					this.$refs.popup.open()
				},
				showVideo(url){
					this.$data.isImage=false;
					this.$data.bigVedio=url;
					this.$refs.popup.open()
				},
				selectVideo(){
					let self=this;
					uni.chooseVideo({
						// sourceType: ['camera', 'album'],
						success: function (res) {
							http.video(res.tempFilePath,(result)=>{
								if(result.code==0){
									self.$data.vedioList.push(result.result.url);
								}else{
									self.showContentToast("上传视频失败");
								}
							
							})
							
						},
						fail:function(res){
							self.showContentToast("上传视频失败");
						}
					});
				
				},
				selectImages(){
					let self=this;
					uni.chooseImage({
						crop:{"width":200,"height":200},
						count: 16,
						success: (res) => {
							if(res.tempFilePaths.length>0){
								for(var i=0;i<res.tempFilePaths.length;i++){
									var tempFilePath=res.tempFilePaths[i];
									http.image(tempFilePath,(result)=>{
										if(result.code==0){
											self.$data.imagesList.push(result.result.url);
										}else{
											self.showContentToast("上传图片失败");
										}
									
									})
								}
							}
						
							
						},
						fail:function(res){
							self.showContentToast("上传图片失败");
						}
					})
				},
				showContentToast(title){
					uni.showToast({
					  title: title,
					  icon: "none"
					})
				},
				
				submit(){
					var self=this;
					// console.table(this.$data.tableList);
					// return;
					if(this.$data.tableList.length>0){
						var templateId=uni.getStorageSync('templateId');
						var data={
							templateId:templateId,
							value:[]
						};
						
						for(let i=0;i<this.$data.tableList.length;i++){
							var tableItem=this.$data.tableList[i];
							var item={
								fieldId:tableItem.id,
								value:""
								
							};
							
							switch(tableItem.type){
								//文本和时间
								case 1:
								case 7:
									item.value=tableItem.content;
									break;
								//单选和下拉
								case 2:
								case 4:
									if(tableItem.optionList.length>0){
										for(var j=0;j<tableItem.optionList.length;j++){
											if(tableItem.optionList[j].value==tableItem.content){
												item.value=tableItem.optionList[j].id;
											}
										}
									}
									break;
								//多选
								case 3:
									if(tableItem.optionList.length>0){
										var list=[];
										for(var j=0;j<tableItem.optionList.length;j++){
											for(var k=0;k<tableItem.content.length;k++){
												if(tableItem.optionList[j].value==tableItem.content[k]){
													list.push(tableItem.optionList[j].id);
													
												}
											}
											
										}
										item.value=JSON.stringify(list);
									}
									
									break;
								//图片
								case 5:
									item.value=JSON.stringify(this.$data.imagesList);
									break;
								//视频
								case 6:
									item.value=JSON.stringify(this.$data.vedioList);
									break;
							}
							data.value.push(item);
						}
						for(var i=0;i<data.value.length;i++){
							if(data.value[i].value.length==0){
								self.showContentToast("有元素内容为空");
								return ;
							}
						}
						
						
						http.post("/api/template/addRecord",data,(result)=>{
							if(result.status){
								// common.setCacheData(self.$data.type,self.$data.subType,data.data.data);
								common.removeSynchronousStatus(5,templateId);
								common.updateFieldvalue(4,0,templateId,"countText",1,"条记录");
								uni.redirectTo({
									url:"/pages/template/templateRecord"
								})
							}else{
								self.showContentToast(result.msg);
							}
							
						})
					}else{
						this.showContentToast("表格元素不可以为空");
					}
						
						
				
					
				},
			}
		}
</script>

<style>
.example-body {
	background-color: #fff;
	padding: 10px;
}

.example {
	padding: 15px;
	background-color: #fff;
}
.button-sp-area{
	margin: 0 auto;
	width: 60%;
}
.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		
	}

	.popup-height {
		@include height;
		width: 200px;
	}
	.demo-uni-row{
		padding-bottom: 20px;
	}
.grid-item-box {
					flex: 1;
					
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 5px 0;
				}
				
			.image {
					width: 50px;
					height: 50px;
				}
				.popup-content {
						@include flex;
						align-items: center;
						justify-content: center;
						padding: 15px;
						height: 500px;
						width:500px;
						background-color: #fff;
						text-align: center;
					}
</style>